<template>
	<view>
		<view class="ipt">
				<ipt />
		</view>
		<view class="tab">
			<view :class="{active :idx==0}" @click="hotTi">热门回答</view>
			<view :class="{active :idx==1}" @click="newTi">最新问题</view>
			<view :class="{active :idx==2}" @click="waitTi">等待回答</view>
		</view>
	
			<wenda :data="data" v-if="idx==0" />
			<wenda :data="data" v-if="idx==1" />
			<wenda :data="data" v-if="idx==2" />
	</view>
</template>

<script>
	import wenda from '../../components/wenda/wenda.vue'
	import { ref } from "vue"
import ipt from '../../components/Search_ipt/Search_ipt.vue'
import {hot,wait,newwt} from '../../unti/api.js'
	export default {
	components:{
		ipt,
		wenda
	},
		setup(props, context) {
			let data=ref([])
				let idx=ref(0)
				hot({current: 1, size: 10}).then((res)=>{
					// console.log(res,'hot');
					data.value=res.data.data.records
				})
				const hotTi=()=>{
					idx.value=0
					hot({current: 1, size: 10}).then((res)=>{
						// console.log(res,'hot');
						data.value=res.data.data.records
					})
				}
				const newTi=()=>{
					idx.value=1
					wait({current: 1, size: 10}).then((res)=>{
						// console.log(res,'wait');
							data.value=res.data.data.records
					})
				}
				const waitTi=()=>{
					idx.value=2
					newwt({current: 1, size: 10}).then((res)=>{
						// console.log(res,'newwt');
							data.value=res.data.data.records
					})
				}
				// hot({current: 1, size: 10}).then((res)=>{
				// 	console.log(res,'hot');
				// 	data.value=res.data.data.records
				// })
				// wait({current: 1, size: 10}).then((res)=>{
				// 	console.log(res,'wait');
				// 		data.value=res.data.data.records
				// })
				// newwt({current: 1, size: 10}).then((res)=>{
				// 	console.log(res,'newwt');
				// 		data.value=res.data.data.records
				// })
				
				return{
					idx,
					hotTi,
					newTi,
					waitTi,
					data
				}
			}
	}
</script>

<style>
	.tab{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
		margin-top: 30px;
	}
	.active{
		color:blue;
		border-bottom: 3px solid blue;
	}
	.ipt{
		background-color: blue;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9999;
	}
</style>
